<template>
  <el-container>
    <el-main>
      <!-- 课程分类 -->
      <div class="category-list">
        <span
            v-for="courseType in courseTypeList"
            :key="courseType.code"
            :class="['category-item', { active: selectedCode === courseType.code }]"
            @click="selectCategory(courseType.code)"
        >
          {{ courseType.name }}
        </span>
      </div>

      <!-- 课程列表 -->
      <el-row :gutter="20" class="course-list">
        <el-col
            v-for="course in tableData"
            :key="course.courseId"
            :span="6"
            class="course-item"
            @click="courseDetail(course.courseId)"
        >
          <el-card>
            <img :src="course.courseImage" alt="课程图片" class="course-image" />
            <div class="course-name">{{ course.courseName }}</div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <el-pagination style="margin-top:20px"
                     :current-page="searchForm.pageNum"
                     :page-size="searchForm.pageSize"
                     :page-sizes="[8,12]" layout="->,total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-main>
  </el-container>
</template>

<script setup>
import {ref, computed, onMounted, reactive} from 'vue';
import { useRouter } from 'vue-router';
import dictAPI from "@/api/module/dict";
import courseAPI from "@/api/module/course";

let courseTypeList = ref([]);
let selectedCode = ref(null);

// 课程数据
let tableData = ref([]);
let total = ref(0);

// Dom 挂载之后
onMounted(() => {
  typeList();
  switchToFirstTab();
  getCourseList();
})

// 搜索条件
const searchForm = reactive({
  courseName:'',
  courseType:'',
  pageNum: 1,
  pageSize: 8,
})

const router = useRouter();

const newItem = { code: 'all', name: '全部' };

//获取课程类型字典值下拉框
const typeList = async () => {
  const res = await dictAPI.list('COURSE_TYPE');
  courseTypeList.value = JSON.parse(res.data[0].dictionaryValue);
  courseTypeList.value.unshift(newItem);
}

// 选择分类
const selectCategory = (code) => {
  searchForm.courseType = code;
  selectedCode.value = code;
  getCourseList();
};

//根据code过滤课程
const getCourseList = async () => {
  if(searchForm.courseType === 'all'){
    searchForm.courseType = null;
  }
  const res = await courseAPI.page(searchForm);
  tableData.value = res.data.records;
  total.value = res.data.total;
}

const handleSizeChange = (size) => {
  if(searchForm.courseType === 'all'){
    searchForm.courseType = null;
  }
  searchForm.pageSize = size;
  getCourseList();
}
const handleCurrentChange = (current) => {
  if(searchForm.courseType === 'all'){
    searchForm.courseType = null;
  }
  searchForm.pageNum = current;
  getCourseList();
}

// 切换到第一个 tab 的方法
const switchToFirstTab = () => {
  selectedCode.value = 'all'; // 将 activeTab 设置为第一个 tab 的值
};


//跳转到课程详情页面
const courseDetail =  (courseId) => {
  router.push({
    path:'/detail/' + Date.now(),
    query:{
      "courseId": courseId
    }
  });
}
</script>

<style scoped>
.category-list {
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.category-item {
  margin-right: 20px;
  font-size: 16px;
  cursor: pointer;
  color: #666;
  transition: color 0.3s;
}

.category-item:hover {
  color: #409eff;
}

.category-item.active {
  color: #409eff;
  font-weight: bold;
  //background-color: #409eff;
  //color: white;
}

.course-list {
  margin-top: 20px;
}

.course-item {
  margin-bottom: 20px;
}

.course-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.course-name {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
</style>